<template>
  <div>
    <div class="lg_page">
      <div class="lg_title">
        <span>🐉龙云管理平台</span>
      </div>
      <transition name="form-fade" mode="in-out">
        <div class="lg_form" v-show="showLogin">
          <div class="f_t">
            <p>用户登录</p>
          </div>
          <el-form :model="lg_ef" :rules="rules" ref="lg_ef" class="f_f">
            <el-form-item prop="username">
              <el-input v-model="lg_ef.username" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" placeholder="密码" v-model="lg_ef.password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @key.enter.native="submitForm('lg_ef')" @click="submitForm('lg_ef')" class="lg_btn">登陆</el-button>
            </el-form-item>
          </el-form>
        </div>
      </transition>

      <div class="tip">
        <p>
          温馨提示：获取账号密码请联系管理员:
          <a href="mailto:joshualwork@163.com">joshualwork@163.com</a>
        </p>
        <p>Copyright© 2019-2021 51btme.top All Rights Reserved | Design by joshua 豫ICP备19001668号</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      lg_ef: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
      showLogin: false
    };
  },
  created() {
    var _self = this;
    var key;
    document.onkeydown = function(e) {
      if (window.event == undefined) {
        key = e.keyCode;
      } else {
        key = window.event.keyCode
      }
      if (key == 13) {
        _self.submitForm('lg_ef');
      }
    };
  },
  mounted() {
    this.showLogin = true;
  },
  methods: {
    submitForm(formName) {
      var formData =  JSON.stringify(this.lg_ef)
      var newSplicing= `${formName}:${formData}`
      console.log(newSplicing);
      this.$router.push("/dragon/home");
    }
  }
};
</script>
<style lang="less" scoped>
@import "@/style/mixin";
.lg_page {
  background: url("../../static/background/login1.jpg");
  .bg();
}

span {
  .ft-sc(27px, white);
}

.lg_title {
  .wh(300px, 35px);
  .position-c(400px, 600px);
}
.lg_form {
  .wh(320px, 210px);
  .position-c(-500px, 300px);
  padding: 25px;
  border-radius: 5px;
  text-align: center;
  background-color: #fff;

  .f_t {
    margin-top: 2px;
    .ft-sc(16px, rgb(0, 195, 255));
  }

  .f_f {
    margin-top: 20px;
  }
  .lg_btn {
    width: 100%;
    font-size: 16px;
  }
}

.tip {
  .ft-sc(15px, black);
  margin-top: 620px;
}

.form-fade-enter-active,
.form-fade-leave-active {
  transition: all 1s;
}

.form-fade-enter,
.form-fade-leave-active {
  transform: translate3d(0, -50px, 0);
  opacity: 0;
}
</style>
